<template>
  <div class="page" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
    <div>
      <el-button type="primary" @click="guide">开始引导</el-button>
      <el-button type="primary" @click="addStep(4)">新增第四步</el-button>
      <el-button type="primary" @click="addStep(5)">新增第五步</el-button>
    </div>
    <div style="width: 600px;height: 400px;border: 1px solid #ddd;margin-top: 10px;">
      <div class="item item1" data-step="1" data-intro="这里是步骤1!">测试1</div>
      <div class="item item2" data-step="2" data-intro="这里是步骤2!">测试2</div>
      <div class="item item3" data-step="3" data-intro="这里是步骤3!">测试3</div>
      <div class="item item4" data-step="4" data-intro="这里是步骤4!">测试4</div>
    </div>
  </div>
</template>

<script>
import introJs from 'intro.js'
import 'intro.js/introjs.css'
// import 'intro.js/themes/introjs-flattener.css'
export default {
  data () {
    return {
      intro: null,
      steps: []
    }
  },
  methods: {
    initSteps () {
      this.steps = [...[{
          title: 'Welcome',
          intro: 'Hello World! 👋'
        },
        {
          element: document.querySelector('.item1'),
          title: 'Step 2',
          intro: 'This step focuses on an image'
        },
        {
          title: 'Step 3',
          element: document.querySelector('.item2'),
          intro: 'And this is our final step!'
        }
      ]]
    },
    guide () {
      this.intro = null
      this.initSteps()
      this.intro = introJs()
      this.intro.setOptions({
        steps: this.steps,
        nextLabel: '下一步 &rarr;',
        prevLabel: '&larr; 上一步',
        skipLabel: '跳过',
        doneLabel: '结束',
        showStepNumbers: true,
      }).start()
    
      this.intro.onexit(function() {
        console.log("退出来了")
      })
      this.intro.onbeforeexit(function() {
        console.log("on before exit")
        return false;
      })
      this.intro.onchange(function(targetElement) {
        console.log(targetElement)
        console.log("new step");
        const el = document.querySelector('.introjs-helperNumberLayer')
        console.log(el.textContent.split(' ').shift())
      });
    },
    addStep (stepNum) {
      const step = {
        element: document.querySelector('.item' + (stepNum - 1)),
        title: 'Step ' + stepNum,
        intro: "Ok, wasn't that fun?"
      }
      this.steps.push(step)
      this.intro.start().goToStep(stepNum)
    }
  }
}
</script>

<style lang="scss">
.page {
  width: 100%;
  height: 100%;
  padding: 10px;
  .item {
    line-height: 30px;
  }
}
</style>